<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="js/qs.js"></script>
</head>
<body>
<div id="app">
    <b style="color: red; font-size: 20px;">学生列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="dialogAddStudentVisible=true">添加学生</el-button>
    </div>
    <!--表格-->
    <el-table
            :data="tableData"
            v-loading="loading">
        <el-table-column prop="number" label="学号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="140">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showUpdateDialog(props.row)">修改</el-button>
                <el-button type="danger" @click="deleteStudent(props.row.number)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
    分页组件
    @size-change： 当改变每页条数时触发的函数
    @current-change：当改变页码时触发的函数
    current-page ：默认的页码
    :page-sizes：每页条数选择框中显示的值
    :page-size : 默认的每页条数
    layout： 分页组件的布局
    total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
    :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <!--添加学生弹窗-->
    <el-dialog title="添加学生" :visible.sync="dialogAddStudentVisible" @close="resetForm">
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="formData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <el-input v-model="formData.birthday"   ></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addStudent">添加</el-button>
                <el-button @click="$refs['addForm'].resetFields()">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--修改学生弹窗-->
    <el-dialog title="编辑学生" :visible.sync="dialogUpdateStudentVisible" @close="pageQuery">
        <el-form :model="updateFormData" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="updateFormData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="updateFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <el-input v-model="updateFormData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="updateFormData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="updateStudent">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 100      //总条数
            },
            loading: false,
            dialogAddStudentVisible: false,//弹出框
            formData: {},
            rules: {//表单校验规则
                number: [
                    {required: true, message: '请输入学号', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                birthday: [
                    {required: true, message: '请选择日期', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ]
            },
            /*编辑功能*/
            dialogUpdateStudentVisible:false,
            updateFormData:{}
        },

        methods: {
            /*修改学生*/
            showUpdateDialog(row){
                this.dialogUpdateStudentVisible = true;
                this.updateFormData = row;
            },
            updateStudent(){
                axios.post("/user/update",Qs.stringify(this.updateFormData))
                    .then(resp=>{
                        if(resp.data == true){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogUpdateStudentVisible = false;//隐藏模态框
                            this.pageQuery();

                        }else{
                            this.$message.error("修改失败")
                        }
                    }).catch(e=>{

                })
            },
            //添加学生方法
            addStudent: function () {
                this.dialogAddStudentVisible = true;
                axios.post("/user/add", Qs.stringify(this.formData))
                    .then((resp) => {
                        if (resp.data == true) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.dialogFormVisible = false;
                            this.resetForm();
                            this.pageQuery();
                        } else {
                            this.$message.error("添加失败")
                        }
                    }).catch(
                    this.$message.error("服务器忙,请30S后在聊")
                );
            },
            //删除
            deleteStudent: function (number) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//表示点击了确认按钮
                    axios.post("/user/delete?number=" + number)
                        .then(resp => {
                            if (resp.data == true) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.pageQuery();
                            } else {
                                this.$message.error("删除失败")
                            }
                        }).catch(() => {
                            this.$message.error("服务器忙,请30S后在聊")
                        }
                    )
                }).catch(
                    () => {
                        this.$message.error("服务器忙,请30S后在聊")
                    }
                )
            },
            //每页条数改变时触发
            handleSizeChange: function (pageSize) {
                this.pagination.pageSize = pageSize;
                this.pageQuery();
            },
            //改变页码触发
            handleCurrentChange: function (pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.pageQuery();
            },
            //和后端交互，查询分页信息
            pageQuery: function () {
                this.loading = true;
                axios.post("/user/pageQuery", Qs.stringify({
                        pageSize: this.pagination.pageSize,
                        pageNum: this.pagination.currentPage
                    })
                ).then(resp => {
                    this.pagination.total = resp.data.total;
                    this.tableData = resp.data.list;
                    this.loading = false;
                }).catch(e => {
                    console.log(e);
                }).finally(() => {
                    this.loading = false;
                });
            },
            //重置表单
            resetForm() {
                this.$refs["addFrom"].resetFields();
            }
        },
        //Vue被创建时执行
        created(){
            this.pageQuery();
        }
    });
</script>

</body>
</html>